<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JS移动效果</title>
	<style type="text/css">
		#fad{
			width: 200px;
			height: 200px;
			background: #1b7ed1;
			position: absolute;
			left: -200px;
		}
		#son{
			width: 18px;
			height: 40px;
			border: 2px solid #1b7ed1;
			border-radius: 4px;
			position: absolute;
			right: -18px;
			top: 80px;
		}
	</style>
	<script type="text/javascript">
      var timer=null;
	   

	   function mout(speed,len){
	   	clearInterval(timer);
	   	var oDiv=document.getElementById("fad");
	   	
	   	 timer=setInterval(function(){
	   		if(oDiv.offsetLeft==len) {
	   			clearInterval(timer);
	   		}
	   		else{
	   			oDiv.style.left=oDiv.offsetLeft+speed+"px";
	   	}
	   	},1)
	   }

	</script>
</head>
<body>
	<div id="fad" onmouseover="mout(1,-0)" onmouseout="mout(-1,-200)">
		<div id="son" >分享</div>
	</div>
</body>
</html>